<template>
	<div class="me">
		<div class="me-top">
			<img src="https://s.qunarzz.com/usercenter_mobile/images/my/mybgnew-20161111.jpg" alt="">
			<div>
				<van-icon size="20" color="#fff" name="arrow-left" />
			</div>
			<div v-if="userinfo.phone">
				<div class="user absolute flex" >
					<van-image
					  round
					  width="65"
					  height="65"
					  src="https://qcommons.qunar.com/headshot/headshotsById/435109994.png?l&ssl=true&_=1699427420012"
					  style="margin-right: 10px;"
					/>
					<div>
						<p>400</p>
						<p class="font-size-12">信用分</p>
					</div>
				</div>
				<div class="absolute shim flex flex_between" ><van-icon class-prefix="icon" name="me" style="margin-right: 5px;"/> 去实名 ></div>  
			</div>
			<div style="bottom: 15px;left: 50%;transform:translateX(-50%) ;" class="absolute" v-else @click="gologin">
				<van-image
				  round
				  width="65"
				  height="65"
				  src="https://source.qunarzz.com/usercenter/touch/avatar.png"
				/>
				<div style="color: #fff;font-size: 14px;text-align: center;">
					登录/注册
				</div>
			</div>
			
		</div>
		<div class="me-cont">
			<div class="line flex flex_align" style="border-bottom: 1px solid  #ebeced;">
				<span class="icons qb"><van-icon color="#fff" size="18" class-prefix="icon" name="qb" /></span>
				<span> 我的钱包</span>
			</div>
			<div class="yue flex flex_between">
				<div>
					<p >0.00</p>
					<p class="font-size-12">账户余额</p>
				</div>
				<div>
					<p>0.00</p>
					<p class="font-size-12">星券</p>
				</div>
				<div>
					<p>0 张</p>
					<p class="font-size-12">银行卡</p>
				</div>
			</div>
			
		</div>
		<div class="me-cont">
			<div class="line flex flex_align" style="border-bottom: 1px solid  #ebeced;" @click="navigator('/')">
				<span class="icons dd"><van-icon color="#fff" size="18" class-prefix="icon" name="dd" /></span>
				<span> 我的订单</span>
				<span class="tig"><van-icon color="#c7c7cc" size="12" class-prefix="icon" name="jt" /></span>
			</div>
			<div class="line flex flex_align" style="border-bottom: 1px solid  #ebeced;">
				<span class="icons tk"><van-icon color="#fff" size="18" class-prefix="icon" name="tk" /></span>
				<span> 我的退款</span>
				<span class="tig"><van-icon color="#c7c7cc" size="12" class-prefix="icon" name="jt" /></span>
			</div>
			<div class="line flex flex_align" style="border-bottom: 1px solid  #ebeced;">
				<span class="icons tk"><van-icon color="#fff" size="18" class-prefix="icon" name="fp" /></span>
				<span> 我的发票</span>
				<span class="tig"><van-icon color="#c7c7cc" size="12" class-prefix="icon" name="jt" /></span>
			</div>
			<div class="line flex flex_align" style="border-bottom: 1px solid  #ebeced;" @click="navigator('/gonlve')">
				<span class="icons tk"><van-icon color="#fff" size="18" class-prefix="icon" name="gl" /></span>
				<span> 我的攻略</span>
				<span class="tig"><van-icon color="#c7c7cc" size="12" class-prefix="icon" name="jt" /></span>
			</div>
		</div>
		
		<div class="me-cont">
			<div class="line flex flex_align" style="border-bottom: 1px solid  #ebeced;">
				<span class="icons sz"><van-icon color="#fff" size="18" class-prefix="icon" name="sz" /></span>
				<span> 设置</span>
				<span class="tig">个人信息、安全设置等<van-icon  size="12" class-prefix="icon" name="jt" /></span>
			</div>
			<div class="line flex flex_align" style="border-bottom: 1px solid  #ebeced;">
				<span class="icons sz"><van-icon color="#fff" size="18" class-prefix="icon" name="sz" /></span>
				<span> 意见反馈</span>
				<span class="tig"><van-icon size="12" class-prefix="icon" name="jt" /></span>
			</div>
			<div class="line flex flex_align" style="border-bottom: 1px solid  #ebeced;">
				<span class="icons sz"><van-icon color="#fff" size="18" class-prefix="icon" name="sz" /></span>
				<span> 关于去哪儿网</span>
				<span class="tig"><van-icon size="12" class-prefix="icon" name="jt" /></span>
			</div>
		</div>
		<div class="footer">
			Qunar京ICP备05021087
		</div>
	</div>
</template>

<script>
	export default {
		name:"me",
		data() {
			return {
				userinfo:{}
			}
		},
		created(){
			let use = JSON.parse(localStorage.getItem("userinfo")) 
			if(use){
				this.userinfo = use
				console.log(use.phone)
			}
		},
		methods: {
			gologin() {
				this.$router.push("/login")
			},
			navigator(path){
				this.$router.push(path)
			}
		},
		
	}
</script>

<style scoped lang="scss">
	div{
		box-sizing: border-box;
	}
	.me{
		font-size: 16px;
		
	}
	.me-top{
		position: relative;
		width: 100%;
		height: 160px;
		img{
			width: 100%;
			margin-top: -460px;
		}
		
		.user{
			bottom: 30px;
			left: 20px;
			align-items: center;
			color: #fff;
			.font-size-12{
				font-size: 12px;
			}
		}
		.shim{
			left: 14px;
			bottom: 25px;
			background-color: #fff;
			border: 1px solid rgba(255,255,255,0.5);
			border-radius: 20px;
			transform: scale(0.8);
			font-size: 12px;
			padding: 3px 8px 3px 0;
			text-align: center;
			color:#888;
		}
		
	}
	.me-cont{
		border-top: 10px solid #ebeced;
	}
	.line{
		padding:8px 12px;
		.qb{
			background-color: #ff7043;
		}
		.dd{
			background-color: #4fc3f7;
		}
		.tk{
			background-color: #ffa21f;
		}
		.sz{
			background-color: #90a4ae;
		}
		.icons{
			width: 29px;
			height: 29px;
			text-align: center;
			line-height: 29px;
			border-radius: 40%;
			margin-right: 11px;
		}
		.tig{
			position: absolute;
			right: 10px;
			font-size: 12px;
			color: #c7c7cc;
		}
	}
	.yue{
		padding: 20px 40px;
		text-align: center;
		.font-size-12{
			margin-top: 5px;
			color: #888;;
		}
	}
	.footer{
		background-color: #ebeced;
		padding-top: 30px;
		text-align: center;
		font-size: 12px;
		color:#bfbfbf;
	}
</style>